<template>
    <div class="search">
       <div class="search-title">
         <input type="text" placeholder="请输入搜索内容" v-model="searchConent">
       </div>
      <div class="art-list">
        <ul>
          <router-link tag="li" v-for="(item,index) in songlist" :key="index" :to="{name:'musicPlay',params:{songId:item.songid}}">

            <div class="right">
              <div class="name">
                {{item.songname}}
              </div>
              <div class="adress">
                {{item.artistname}}
              </div>
            </div>
            <i class="iconfont icon-you1"></i>
          </router-link>
        </ul>
      </div>
    </div>
</template>

<script>
    export default {
        name: "search",
        data(){
          return{
            searchConent:'',
            songlist:[]
          }
        },
        created(){
          this.$watch('searchConent', this._debounce((newQuery) => {
            console.log(1)
            const url =this.host + '/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=' + newQuery;
            this.$axios.get(url).then(res=>{
              console.log(res.data);
              if(res.data.error_code ==22001){
                   return false
              }
              this.songlist = res.data.song

            }).catch(err=>{
              console.log(err)
            })
          }, 200))
        },
        methods:{
          // 函数防抖
          _debounce(fn, delay) {
            var delay = delay || 200;
            let timer;
            return function () {
              let th = this;
              let args = arguments;
              if (timer) {
                clearTimeout(timer);
              }
              timer = setTimeout(function () {
                timer = null;
                fn.apply(th, args);
              }, delay);
            };
          }
        }
    }
</script>

<style scoped lang="less">
  .search{
    .search-title{
      width: 100%;
      box-sizing: border-box;
      padding: 10px 17px;
      display: flex;
      input{
        width: 100%;
        flex: 1;
        line-height: 40px;
        text-indent: 10px;
        font-size: 14px;
        color: #666;
        border: 1px solid #f3f3f3;
      }

    }
    .art-list{
      ul {
        li{
          position: relative;
          border-bottom: 1px solid #f3f3f3;
          padding: 8px 15px;
          display: flex;
          align-items: center;
          .left{
            margin-right: 10px;
            img{
              width: 54px;
            }
          }
          .right{
            flex: 0 0 65%;
            width: 65%;

            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            .name{
              color: #333;
              font-size: 14px;
            }
            .adress{
              font-size: 12px;
              color: #999;
              padding-top: 6px;
            }
          }
          .icon-you1{
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 20px;
            color: #999;
          }
        }
      }
    }
  }

</style>
